<template>
  <div>
    <h1>{{ article.title }}</h1>
    <div>{{ article.msg }}</div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'ArtivlePage',
  // 传入参数即为上下文对象
  async asyncData (context) {
    // console.log(context);
    const { data } = await axios({
      method: 'GET',
      url: 'http://localhost:3000/data.json'
    })
    // 获取传入的参数
    const id = Number.parseInt(context.params.id)
    return {
      article: data.posts.find(item => item.id === id)
    }

  }
}
</script>

<style>

</style>